.container {  
	  display: flex;  
	  flex-direction: column;  
	  height: 100vh; /* 填满整个屏幕高度 */  
	  padding: 10px; /* 根据需要调整内边距 */  
	  box-sizing: border-box;  
	}  
	  
	.top-left-icon {  
	  align-self: flex-start; /* 左上角对齐 */  
	  margin-top: 10px; /* 根据需要调整顶部边距 */  
	}  
	  
	.middle-content {  
	  display: flex;  
	  flex-direction: column;  
	  align-items: center; /* 水平居中 */  
	  justify-content: center; /* 垂直居中 */  
	  flex: 1; /* 占据剩余空间 */  
	}  
	  
	.search-bar {  
	  display: flex;  
	  align-items: center;  
	  background-color: #f0f0f0; /* 灰色背景 */  
	  border-radius: 5px; /* 圆角 */  
	  padding: 5px;  
	}  
	  
	.search-icon {  
	  padding: 0 10px; /* 图标间的间距 */  
	}  
	  
	.search-icon.right {  
	  order: 2; /* 将右边的图标放到输入框右边 */  
	}  
	  
	.search-input {  
	  flex: 1; /* 输入框占据剩余空间 */  
	  padding: 5px;  
	  border: none;  
	  outline: none;  
	}  
	  
	.search-btn {  
	  margin-top: 10px; /* 搜索按钮的顶部边距 */  
	  padding: 10px 20px;  
	  background-color: #007aff; /* 蓝色背景 */  
	  color: white;  
	  border: none;  
	  border-radius: 5px;  
	}  
	  
	.bottom-icon {  
	  position: absolute; /* 绝对定位 */  
	  bottom: 20px; /* 距离底部20px */  
	  left: 50%; /* 水平居中 */  
	  transform: translateX(-50%); /* 向左偏移自身宽度的一半，实现居中 */  
	}